<script setup>
import {ref,onMounted} from 'vue';

import {TezeroLayout} from '@tezero/layout';
import * as THREE from 'three';
import {toolGroups} from './tools';

const containerRef=ref(null);
const playing=ref(false);

var tl;

onMounted(()=>{
  tl=new TezeroLayout(containerRef.value,toolGroups,{theme:'light'});
  tl.tezero.control={
      autoRotate:true,
  }
})

    

function handlePlay() {
  if(playing.value){
    tl.tezero.stopPlayer();
  }else{
    tl.tezero.startPlayer();
  }
  playing.value=!playing.value;
}

function handelOpen(){
  tl.tezero.load();
}

function handleDownload(){
  tl.tezero.download();
}



</script>

<template>
  <div>
    <div class="header">
      <button class="tezero-btn" @click="handlePlay">{{playing?'停止':'启动'}}</button>
      <!-- <button id="open" class="tezero-btn">打开</button> -->
      <button class="tezero-btn" @click="handelOpen">打开</button>
      <button class="tezero-btn" @click="handleDownload">保存</button>
    </div>
    <div ref="containerRef"  class="app-container">
    </div>
  </div>
</template>

